<template>
  <img :src="codeSrc" alt="验证码" @click="refreshCode" />
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { randomLenNum } from "@/utils/random";
const LoginCodeImg = defineComponent({
  setup(props, context) {
    // ref
    const codeSrc = ref("");
    const randomStr = ref("");
    // methods
    const refreshCode = () => {
      randomStr.value = randomLenNum();
      codeSrc.value = `/api/code?randomStr=${randomStr.value}`;
      context.emit("refresh", randomStr.value);
    };
    onMounted(() => {
      refreshCode();
    });
    return {
      // ref
      codeSrc,
      // methods
      refreshCode,
    };
  },
});
export default LoginCodeImg;
export type LoginCodeImgRefs = InstanceType<typeof LoginCodeImg>;
</script>